<template>
  <div class="dw-condition-warpper">
    <el-form ref="searchFormRef" :inline="true" :model="formData" @keydown.enter.prevent>
      <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.code">
        <el-input v-if="item.componentType === 'input'" v-model="formData[item.code]" :placeholder="item.placeholder" :style="{ width: item.width + 'px' }" @keyup.enter.stop="onSearch"></el-input>
        <el-date-picker
          v-else-if="item.componentType === 'date-picker'"
          v-model="formData[item.code]"
          type="daterange"
          range-separator="至"
          :start-placeholder="item.startPlaceholder"
          :end-placeholder="item.endPlaceholder"
          :style="{ width: item.width + 'px' }"
        />
        <template v-else-if="item.componentType === 'slot'">
          <slot :name="item.slotName" :config="item" :search-form-data="formData"></slot>
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
import type { FormItemConfig } from '@/types/menu-datagrid-form';
import type { FormInstance } from 'element-plus';
import { reactive, ref, type PropType } from 'vue';

defineOptions({
  name: 'DwSearchForm',
});
const searchFormRef = ref<FormInstance>();

const props = defineProps({
  formItems: {
    type: Array as PropType<FormItemConfig[]>,
  },
});
const searchFormData: Record<string, string | string[] | undefined> = {};
const formItems = ref(props.formItems || []);
for (let i = 0; i < formItems.value.length; i++) {
  const formitem = formItems.value[i];
  searchFormData[formitem.code] = formitem.defaultValue;
}
const formData = reactive(searchFormData);
const emits = defineEmits(['onSearch']);
const onSearch = () => {
  emits('onSearch', formData);
};
const getFormData = (): Record<string, string | string[] | undefined> => {
  return formData;
};
defineExpose({ getFormData });
</script>
<style lang="scss" scoped>
.dw-condition-warpper {
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  :deep(.el-form-item) {
    margin: 8px;
  }
}
</style>
